<template>
    <div class="box">
        <!--轮播图-->
        <mt-swipe :auto="2000">
            <mt-swipe-item class="lunbo"><img src="../../img/1.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item class="lunbo"><img src="../../img/2.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item class="lunbo"><img src="../../img/3.jpg" alt=""></mt-swipe-item>
        </mt-swipe>
        <!--六宫格-->
        <div>
            <ul class="ul1">
                <li><img src="../../img/menu1.png" alt=""><p>新闻资讯</p></li>
                <li><img src="../../img/menu2.png" alt=""><p>新闻资讯</p></li>
                <li><img src="../../img/menu3.png" alt=""><p>新闻资讯</p></li>
                <li><img src="../../img/menu4.png" alt=""><p>新闻资讯</p></li>
                <li><img src="../../img/menu5.png" alt=""><p>新闻资讯</p></li>
                <li><img src="../../img/menu6.png" alt=""><p>新闻资讯</p></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "home-container"
    }
</script>

<style scoped lang="scss">
    .box{
        background-color: #fff;
    }
    .mint-swipe {
        height: 220px;
    }

    .mint-swipe img {
        height: 220px;
        width: 375px;
    }

    li {
        list-style: none;
        width: 32%;
        height: 110px;
        /*border: 1px solid red;*/
        text-align: center;
    }

    .ul1 {
        display: flex;
        padding: 0 0 0 10px;
        flex-wrap: wrap;
    }
    .ul1 img{
        width: 55px;
        height: 55px;
    }
</style>